<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org" >
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MyStore | 一站式应用解决方案</title>
  <!-- 引入 Bootstrap 样式库 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css">
  <!-- 引入自定义样式 -->
  <style>
    .col a{
      text-decoration: none;
      color: black;
    }
  </style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" th:href="@{/}">MyStore</a>
    <!-- 搜索框 -->
    <form class="d-flex" method="get" th:action="@{/console/app/search.do}">
      <input class="form-control form-control-lg" type="search" name="data" placeholder="搜索应用" aria-label="Search">
      <button class="btn btn-primary" type="submit">搜索</button>
    </form>
    <!-- 用户图标 -->
    <a href="" th:href="@{/console/user/userCenter.do(userId=*{session.userId})}" onclick="">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-person" viewBox="0 0 16 16">
        <path d="M8 8.112a2.112 2.112 0 1 1 0-4.224 2.112 2.112 0 0 1 0 4.224zm0 1.063c-2.08 0-6.4 1.052-6.4 3.168V14h12.8v-1.657c0-2.116-4.32-3.168-6.4-3.168z"/>
        <path fill-rule="evenodd" d="M8 9a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0-1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"/>
      </svg>
    </a>
  </div>
</nav>
<!-- 修改密码页面 -->
<div class="container">
  <div class="row">
    <div class="col-md-6 offset-md-3 mt-5">
      <h2 class="text-center mb-4">修改密码</h2>
      <div class="card">
        <div class="card-body">
          <form id="passwordForm" th:action="@{/console/user/saveUserPassword.do}" method="post" onsubmit="submitForm(event)">
            <div class="mb-3">
              <label for="oldPasswordInput" class="form-label">原密码</label>
              <input type="hidden" class="form-control"  name="userId" th:value="${userId}" required>
              <input type="password" class="form-control" id="oldPasswordInput" name="userPassword" required>
            </div>
            <div class="mb-3">
              <label for="newPasswordInput" class="form-label">新密码</label>
              <input type="password" class="form-control" id="newPasswordInput" name="userNewPassword" required>
            </div>
            <div class="mb-3">
              <label for="confirmPasswordInput" class="form-label">确认密码</label>
              <input type="password" class="form-control" id="confirmPasswordInput" required>
              <div class="invalid-feedback">新密码和确认密码不一致。</div>
            </div>
            <button type="submit" class="btn btn-primary">确认修改</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script th:inline="javascript">
  // 在这里编写JavaScript代码
  var message = [[${msg}]];
  if (message!==undefined&&message!==null&&message!=='')
    alert(message);
</script>
<script>
  function submitForm(event) {
    event.preventDefault();
    var newPassword = document.getElementById('newPasswordInput').value;
    var confirmPassword = document.getElementById('confirmPasswordInput').value;

    if (newPassword !== confirmPassword) {
      // 新密码和确认密码不一致，显示错误提示
      document.getElementById('confirmPasswordInput').classList.add("is-invalid");
    } else {
      // 提交表单
      document.getElementById('passwordForm').submit();
    }
  }
</script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- 引入 Bootstrap JavaScript 库 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

